<style>
	.problema_texto  { font-size:100%; padding-right:10px; }
	.sv_delete_problem { cursor:pointer;}
</style>


<table width='100%'>
	<tr>
		<td style="text-align:right;vertical-align: middle;">Problema:</td>
		<td colspan='2'>
			<div id="resultado_busqueda"></div>
			<input id='problema' name='problema' style="width:189px;font-size:12px;margin-right: -3px;" onkeypress="prevenirPulsarEnter(this.name)">
			<input type="button" value="Buscar" id="buscar_problemas" class="btn" style="width: 59px;vertical-align: baseline;">
			<input id='texto_problema_seleccionado' name='texto_problema_seleccionado' type='hidden' >
			<input id='problema_id' name='problema_id' type='hidden' >
		</td>
		<td style="text-align:right;vertical-align: middle;">Fecha:</td>
		<td>
			<input name="fecha_problema" id="fecha_problema" type="text" value="<?php echo date("d/m/Y");?>" readonly="readonly" style="width:90px; font-size: 100%">
		</td>
	</tr>
	<tr>
		<td style="text-align:right;vertical-align: middle;">Estado:</td>
		<td>
			<select name='state_problem_id' id="state_problem_id" style="width:120px; font-size:12px;">
				<?php foreach($StateProblems as $sp){

					// Si es Cronico Activo, va por default
					if($sp['Stateproblem']['id'] == 2){
						$txt_selected = " selected ";
					}else{
						$txt_selected = "";
					}
?>
					<option value="<?php echo $sp['Stateproblem']['id'];?>" <?php echo $txt_selected ?>><?php echo $sp['Stateproblem']['name'];?></option>
				<?php } ?>
			</select>
		</td>
		<td style="text-align:right;vertical-align: middle;">Tag:</td>
		<td>
			<select name='tag_id' id="tag_id" style="width:90px; font-size:12px;">
				<option value="0" >--</option>
				<?php foreach($Tags as $tag){ ?>
					<option value="<?php echo $tag['Tag']['id'];?>" ><?php echo $tag['Tag']['name'];?></option>
				<?php } ?>
			</select>
		</td>
		<td>
			
			<input type="button" value="Agregar" id="problema_boton_agregar" class="btn" style="cursor:pointer;">
		</td>
	</tr>
</table>


<table id="lista_problemas">

</table>							

<script>

	jQuery(function() {
		
		jQuery('#problema_id').val(0);


		jQuery("#buscar_problemas").click(function() {

			jQuery("#resultado_busqueda").show();

			// Muestra Transicion
			jQuery('#resultado_busqueda').html('<img src="/images/loading3.gif" />');			

			jQuery.ajax({
				type: "GET",
				url: "/ajax/listado_problemas/",
				data: "q="+jQuery("#problema").val(),
				success: function(data) {

					var obj = jQuery.parseJSON('['+data+']');
					var html_resultado = "";

					if(obj.length > 0){
						html_resultado = '<p style="margin-bottom: 2px;float: left;"><b>Se encontraron '+obj.length+' resultados</b><div style="float: right;margin-top: -5px;"><a href="javascript:cerrarResultado()" style="font-weight: bold;">x</a></div></p>';
						// Muestro el Resultado
						jQuery.each(obj, function(key, val) {
						    html_resultado += '<p style="margin-top: 2px;"><a href="javascript:agregarElementos(\''+val.id+'\',\''+val.name+'\');" class="btn" style="text-align: left;width: 94%;">'+val.name+'</p>';
						});
					}else{
						html_resultado = '<p style="margin-top: 2px;float: left;">No se encontraron datos.<div style="float: right;margin-top: -5px;"><a href="javascript:cerrarResultado()" style="font-weight: bold;">x</a></div></p>';
					}
					jQuery("#resultado_busqueda").html(html_resultado);
				}

			})
		});

		jQuery( "#fecha_problema" ).datepicker({
				showOtherMonths: true,
				dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
				dateFormat: 'dd/mm/yy',
				monthNamesShort:	['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
				monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
				changeMonth: true,
				changeYear: true,
				minDate: "-<?php echo $edad['edad'] ?><?php if($edad['unidad_edad'] == "años"){ echo "Y";}else{ echo "D";}?>", 
				maxDate: 0,
				nextText: 'Siguiente',
				prevText: 'Anterior'
		});
		
		//  Agregar opcion
		jQuery("#problema_boton_agregar").click(function(evento){
				
			var problema_id        = jQuery("#problema_id").val();
			var problema_texto     = jQuery("#problema").val();
			var texto_problema_seleccionado = jQuery("#texto_problema_seleccionado").val();
			var stateproblem_id    = jQuery("#state_problem_id").val();
			var stateproblem_texto = jQuery('#state_problem_id option:selected').text();
			var tag_id             = jQuery("#tag_id").val();
			var tag_texto          = jQuery('#tag_id option:selected').text();
			var fecha              = jQuery("#fecha_problema").val();
			
			if (problema_id > 0 && problema_texto == texto_problema_seleccionado) {
				var tds = "<tr>";
				tds += "<td class='problema_texto'><img src='/images/delete.gif' class='sv_delete_problem'/></td>";
				tds += "<td class='problema_texto' style=\"width:280px;overflow:hidden;\">" + problema_texto + "</td>";
				tds += "<td class='problema_texto'>";
				tds += "<input name='data[Problemas]["+ problema_id +"][stateproblem_id]' value='"+ stateproblem_id +"'type='hidden'/>";
				tds += "<input name='data[Problemas]["+ problema_id +"][tag_id]' value='"+ tag_id +"'type='hidden'/>";			
				tds += "<input name='data[Problemas]["+ problema_id +"][fecha]' value='"+ fecha +"'type='hidden'/>";						
				tds += stateproblem_texto ;
				tds += "</td>";
				tds += "<td class='problema_texto'>"+ tag_texto + "</td>";
				tds += "<td class='problema_texto'>"+ fecha+"</td>";				
				
				tds += "</tr>";
				jQuery("#lista_problemas").append(tds);
				jQuery("#hay_problema").val(1);	
			}			

			jQuery('#problema_id').val(0);
			jQuery('#problema').val('');
			jQuery('#texto_problema_seleccionado').val('');
		});
		   
		// event listener for delete button 
		jQuery(".sv_delete_problem").live('click', function(event) {
			jQuery(this).parent().parent().remove();

			var elementos = jQuery('.sv_delete_problem');
			var size = elementos.size();
			jQuery("#hay_problema").val(size);	
		});    
	})
</script>